import { Layout, Menu } from 'antd';
import { history } from 'umi';
import menu from 'dic/menu'
import './index.less';

const { SubMenu } = Menu;
const { Sider } = Layout;

export default function SiderComp({ }) {
  const handleClick = value => {
    const path = value.key;
    history.push(path);
  };

  return (
    <div className="siderComp">
      <Sider>
        <Menu
          mode="horizontal"
          defaultSelectedKeys={[location.pathname]}
          onClick={v => handleClick(v)}
        >
          { menu.map(i => {
            return (
              <SubMenu
                key={i.id}
                title={
                  <div>
                    {/* <img src={i.icon} alt="" /> */}
                    {i.title}
                  </div>
                }
              >
                {i.children.map(t => {
                  return <Menu.Item key={t.path}>{t.title}</Menu.Item>;
                })}
              </SubMenu>
            );
          }) }
        </Menu>
      </Sider>
    </div>
  );
}

